<template>
  <div id="md-shared">
    <md-shared-header :user="user"></md-shared-header>
    <md-shared-mobile-header :user="user"></md-shared-mobile-header>
    <div class="md-shared-container">
      <md-shared-sidebar :menus="menus"></md-shared-sidebar>
      <div class="md-shared-body">
        <div class="md-breadcrumb">
          <el-breadcrumb>
            <el-breadcrumb-item v-for="item in breadcrumbList" :key="item">{{item}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-container class="md-shared-body-base">
          <router-view />
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import MdSharedHeaderComponent from './header.vue'
import MdSharedHeaderMobileComponent from './header.mobile.vue'
import MdSharedSidebarComponent from './sidebar.vue'
import { getUser } from '@/api/system/user.service.js'
import { treeListMenu, treeListMenuByUser } from '@/api/system/menu.service.js'
export default {
  name: 'MdSharedComponent',
  components: {
    'md-shared-header': MdSharedHeaderComponent,
    'md-shared-mobile-header': MdSharedHeaderMobileComponent,
    'md-shared-sidebar': MdSharedSidebarComponent
  },
  data () {
    return {
      breadcrumbList: [],
      menus: []
    }
  },
  computed: {
    user () {
      return this.$store.state.mdUser.user
    }
  },
  watch: {
    $route: {
      handler (route) {
        this.getBreadcrumb(route)
      },
      deep: true
    }
  },
  mounted () {
    this.$store.state.mdUser.user = this.$local.getItem('user')
    this.getBreadcrumb(this.$route)
    this.getUserInfo()
  },
  methods: {
    // 获取面包屑
    getBreadcrumb (route) {
      this.breadcrumbList = []

      const result = []

      if (route && route.meta) {
        if (route.meta.ancestorTitle) {
          result.push(route.meta.ancestorTitle)
          result.push(route.meta.parentTitle)
          result.push(route.meta.title)
        } else {
          result.push(route.meta.parentTitle)
          result.push(route.meta.title)
        }
      }

      this.breadcrumbList = result.filter(e => ![null, undefined].includes(e))
    },
    /** 获取用户信息 */
    async getUserInfo () {
      try {
        const res = await getUser(this.user.userId)

        const user = res.data.user

        user.avatar = require('../assets/img/logo.png')

        this.$local.setItem('user', user)

        this.$local.setItem('dept', res.data.dept)

        this.$local.setItem('roleIds', res.data.roleIds)

        this.$local.setItem('postIds', res.data.postIds)

        this.$local.setItem('roles', res.data.roleList)

        this.$local.setItem('posts', res.data.postList)

        this.$store.state.mdUser.user = user

        const menuRes = await (user.userName === 'admin' ? treeListMenu({ status: '0', orderBy: 'order_num', isDesc: false }) : treeListMenuByUser(user.userId))
        console.log(menuRes.data)
        this.menus = menuRes.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
#md-shared {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .md-shared-container {
    width: 100vw;
    height: calc(100% - @md-shared-header-height);
    box-sizing: border-box;
    display: flex !important;
    .md-shared-body {
      flex: 1;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      .md-breadcrumb {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 20px 10px 20px;
      }
      .md-shared-body-base {
        width: 100%;
        height: calc(100% - 44px);
        box-sizing: border-box;
        padding: 15px;
        overflow: hidden;
      }
    }
  }
}

@media (max-width: 768px) {
  #md-shared {
    .md-shared-container {
      width: 100vw;
      overflow: hidden;
      .md-shared-body {
        width: 100vw;
        .md-breadcrumb {
          width: 100vw;
        }
        .md-shared-body-base {
          width: 100vw;
        }
      }
    }
  }
}
</style>